<!--无人机作业管理模块-->
<template>
  <div class="videos wrapper">
    <div class="role-operate">
      <el-button size="mini" type="primary" @click="showUploadDialog = true">新增无人机作业</el-button>
    </div>
    <div class="bd">
      <ul class="video-list">
        <li v-for="v in videoList" :key="v.videoId" class="video-item">
          <div class="video-container">
            <video controls class="video-player">
              <source :src="v.url" type="video/mp4">
              您的浏览器不支持 HTML5 视频。
            </video>
          </div>
          <div class="video-info">
            <div class="video-name ellipsis">{{ v.name }}</div>
            <div class="card-actions">
              <el-button
                size="mini"
                type="text"
                @click="showWorkProgress(v)"
                class="view-btn"
              >查看作业</el-button>
              <el-button
                size="mini"
                type="text"
                @click="openEditDialog(v)"
                class="edit-btn"
              >编辑</el-button>
              <el-button
                size="mini"
                type="text"
                @click="deleteVideo(v.videoId)"
                class="delete-btn"
              >删除</el-button>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <!-- 上传对话框 -->
    <el-dialog
      title="上传无人机作业"
      :visible.sync="showUploadDialog"
      width="500px"
      @close="resetUpload"
    >
      <div class="uploader">
        <input
          type="file"
          accept="image/*,video/*"
          @change="handleFileSelect"
        >
        <div v-if="previewUrl" class="preview-container">
          <img v-if="isImage" :src="previewUrl" class="preview-content">
          <video v-else :src="previewUrl" controls class="preview-content"></video>
        </div>
        <el-button
          type="primary"
          :disabled="!selectedFile"
          @click="handleUpload"
          class="upload-btn"
        >
          确认上传
        </el-button>
      </div>
    </el-dialog>

    <!-- 作业详情对话框 -->
    <el-dialog
      title="作业详情"
      :visible.sync="showProgressDialog"
      width="500px"
    >
      <div class="work-progress">
        {{ currentWorkProgress }}
      </div>
    </el-dialog>

    <!-- 编辑对话框 -->
    <el-dialog
      title="编辑作业信息"
      :visible.sync="showEditDialog"
      width="400px"
    >
      <el-form label-width="80px">
        <el-form-item label="作业名称">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="作业情况">
          <el-input
            v-model="editForm.workProgress"
            type="textarea"
            :rows="4"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="showEditDialog = false">取消</el-button>
        <el-button type="primary" @click="submitEdit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      videoList: [],
      showUploadDialog: false,
      showProgressDialog: false,
      showEditDialog: false,
      selectedFile: null,
      previewUrl: null,
      isImage: false,
      currentWorkProgress: '',
      editForm: {
        videoId: '',
        name: '',
        workProgress: ''
      }
    }
  },
  created() {
    this.fetchVideos()
  },
  methods: {
    async fetchVideos() {
      try {
        const res = await axios.get('http://localhost:8080/videos/getAll')
        if (res.data.code === '0') {
          this.videoList = res.data.data
        }
      } catch (error) {
        this.$message.error('获取视频列表失败')
      }
    },

    handleFileSelect(e) {
      const file = e.target.files[0]
      if (!file) return

      this.selectedFile = file
      this.isImage = file.type.startsWith('image/')
      this.previewUrl = URL.createObjectURL(file)
    },

    async handleUpload() {
      if (!this.selectedFile) return

      const formData = new FormData()
      const isImage = this.selectedFile.type.startsWith('image/')
      const key = isImage ? 'image' : 'video'
      const url = isImage
        ? 'http://localhost:8080/videos/imageToVideo'
        : 'http://localhost:8080/videos/upload'

      formData.append(key, this.selectedFile)

      try {
        const res = await axios.post(url, formData, {
          headers: { 'Content-Type': 'multipart/form-data' }
        })

        if (res.data.code === '0') {
          this.$message.success('上传成功')
          this.fetchVideos()
          this.showUploadDialog = false
        }
      } catch (error) {
        this.$message.error('上传失败')
      }
    },

    showWorkProgress(video) {
      this.currentWorkProgress = video.workProgress
      this.showProgressDialog = true
    },

    openEditDialog(video) {
      this.editForm = {
        videoId: video.videoId,
        name: video.name,
        workProgress: video.workProgress
      }
      this.showEditDialog = true
    },

    async submitEdit() {
      try {
        const res = await axios.put('http://127.0.0.1:8080/videos/update', this.editForm)
        if (res.data.code === '0') {
          this.$message.success('修改成功')
          this.fetchVideos()
          this.showEditDialog = false
        }
      } catch (error) {
        this.$message.error('修改失败')
      }
    },

    async deleteVideo(videoId) {
      try {
        const res = await axios.delete(`http://localhost:8080/videos/delete?videoId=${videoId}`)
        if (res.data.code === '0') {
          this.$message.success('删除成功')
          this.fetchVideos()
        }
      } catch (error) {
        this.$message.error('删除失败')
      }
    },

    resetUpload() {
      this.selectedFile = null
      this.previewUrl = null
    }
  }
}
</script>

<style scoped>
.video-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.video-item {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  overflow: hidden;
}

.video-container {
  position: relative;
  padding-top: 56.25%;
}

.video-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-info {
  padding: 12px;
}

.video-name {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.uploader {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.preview-container {
  border: 1px dashed #ddd;
  border-radius: 4px;
  padding: 10px;
}

.preview-content {
  max-width: 100%;
  max-height: 300px;
  display: block;
  margin: 0 auto;
}

.work-progress {
  white-space: pre-wrap;
  line-height: 1.5;
  padding: 10px;
  background: #f5f7fa;
  border-radius: 4px;
}

.view-btn {
  color: #67c23a;
}

.edit-btn {
  color: #409eff;
}

.delete-btn {
  color: #f56c6c;
}
</style>
